// 这个就是layui的模块化处理的独特之处，用哪个模块就调用哪个模块
layui.use(function () {
    var $ = layui.jquery,
        table = layui.table,
        layer = layui.layer, //弹层
        element = layui.element; //元素操作
    table.render({
        title: '新书推荐数据表',
        elem: '#newBookList',
        id: 'newBookTable',
        url: "/newBooksRecd/list/",
        //默认一页展示多少条数据
        limit: 10,
        //设置可选项，每页显多少条数据
        limits: [10, 20, 30, 50],
        cellMinWidth: 80,
        // 每一列写入的数据，后端传来的参数填写进去
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'bookId', title: 'ID', sort: true, fixed: 'left'},
            {field: 'bookName', title: '图书名'},
            {field: 'bookIsbn', title: 'ISBN'},
            {field: 'price', title: '售价', sort: true},
            {field: 'author', title: '作者'},
            {field: 'publish', title: '出版社'},
            {field: 'bookPages', title: '图书页数'},
            {field: 'publishDate', title: '图书上架时间'},
            {title: '操作', fixed: 'right', align: 'center', toolbar: '#barDemo'},
        ]],
        // 开启分页
        page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],     // 自定义分页布局
            curr: 1,      // 设置默认起始页1
            groups: 10,   //只显示10个连续页码,就是说显示10个可见页其他的省略
            first: '首页', // 不显示首页 false
            last: '尾页',   // 不显示尾页 false
        },
        toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
        defaultToolbar: ['exports', 'print'],
    });
    // 带条件查询

    var $ = layui.$, active = {
        reload: function () {
            var bookName = $('#bookName').val();
            var bookIsbn = $('#bookIsbn').val();
            //执行重载
            table.reload('newBookTable', {
                url: "/newBooksRecd/searchList/",
                page: {
                    curr: 1,
                    limits: [1]
                },
                where: {
                    bookName: bookName,
                    bookIsbn: bookIsbn
                }
            }, 'data');
        }
    };

    // 绑定搜索事件
    $('.demoTable .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    //监听头工具栏事件
    table.on('toolbar(newBookList)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id)
            , data = checkStatus.data; //获取选中的数据
        switch (obj.event) {
            case 'bookRecdData':
                if (data.length === 0) {
                    layer.msg('请选择一行');
                }
                var ids = [];
                for (i = 0; i < data.length; i++) {
                    ids[i] = data[i].bookId;
                }
                var url = "/newBooksRecd/showEdit/" + JSON.stringify(ids);
                layer.open({
                    type: 2,
                    title: ["借阅", "color:red;"],//不显示标题可以设置false
                    closeBtn: 1,//0代表不显示右上角关闭按钮
                    shadeClose: false,
                    area: ['50%', '60%'],
                    content: url,
                });
                break;
        }
    });

    //监听行工具事件
    table.on('tool(newBookList)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'edit') {
            var ids = [];
            ids[0] = data.bookId;
            var url = "/newBooksRecd/showEdit/" + JSON.stringify(ids);
            layer.open({
                type: 2,
                title: ["借阅", "color:red;"],//不显示标题可以设置false
                closeBtn: 1,//0代表不显示右上角关闭按钮
                shadeClose: false,
                area: ['50%', '60%'],
                content: url,
            });
        }
    });

});

